<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="color: red">
      <a href="">111</a>
    </div>
    <div class="dot"></div>
    <script>
      // 一个点，它会随鼠标移动
      class Dot {
        constructor({ className }) {
          this.dot = document.querySelector('.' + className);
          this.x = 0;
          this.y = 0;
          this.init();
        }
        init() {
          document.addEventListener('mousemove', e => {
            this.x = e.clientX;
            this.y = e.clientY;
            this.move();
          });
        }
        move() {
          this.dot.style.left = this.x + 'px';
          this.dot.style.top = this.y + 'px';
        }
      }
      new Dot({ className: 'dot' });
    </script>
    <style>
      .dot {
        position: absolute;
        width: 10px;
        height: 10px;
        background: red;
        border-radius: 50%;
        z-index: 999;
      }
    </style>
  </body>
</html>
